{extend name="public/container"}
{block name='head_top'}
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="{__ADMIN_PATH}plug/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="{__PC_KS3}src/async.min.js"></script>
{/block}
{block name="content"}
<div id="myApp">
    <div class="add-page-title flex flex-between padding-20">
        <div class="title">新增/编辑</div>
        <el-link :underline="false" type="primary" href="{:Url('index')}">返回</el-link>
    </div>
    <div class="padding-10">
        <div class="content-wrap">
            <div class="basic-info-form-wrap">
                <el-form :model="formData" :rules="rules" ref="formData" size="small" label-width="100px" >
					<el-form-item label="商品名称" prop="goods_name">
					    <el-input v-model="formData.goods_name" placeholder="名称" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品类型" prop="goods_type">
					    <el-select v-model="formData.goods_type" placeholder="请选择">
					        <el-option
				                v-for="item in goodsTypes"
				                :key="item.key"
				                :label="item.val"
				                :value="item.key">
					        </el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="优惠券" v-if="formData.goods_type==6">
					    <el-select v-model="formData.rels.rel_id" placeholder="请选择优惠券">
					        <el-option
				                v-for="item in relsData"
				                :key="item.id"
				                :label="item.title"
				                :value="item.id">
					        </el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="封面主图" prop="cover">
					    <el-upload
					            class="avatar-uploader"
					            action="/admin/upload/image"
					            accept="image/jpeg,image/png,image/jpg"
					            :show-file-list="false"
					            :on-success="uploadCoverSuccess"
					            >
					        <img v-if="formData.cover" :src="formData.cover" class="avatar">
					        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					        <div slot="tip" class="el-upload__tip">尺寸建议为300×300或等比例，格式jpg/jpeg/png且不超过5MB</div>
					    </el-upload>
					</el-form-item>
					<el-form-item label="介绍视频" prop="main_video">
					    <el-input v-model="formData.main_video" placeholder="视频地址">
					        <template slot="append">
					            <el-upload
					                action="/admin/upload/video"
					                :show-file-list="false"
					                accept="video/mp4"
					                :on-success="uploadVideoSuccess">
					                <i class="el-icon-plus">上传</i>
					            </el-upload>
					        </template>
					    </el-input>
					</el-form-item>
					<el-form-item label="商品图册" prop="albums">
					    <el-upload
					        class="upload-album"
					        action="/admin/upload/image"
					        accept="image/jpeg,image/png,image/jpg"
					        :on-success="uploadAlbumSuccess"
					        :multiple="true">
					        <el-button size="small" type="primary">点击上传</el-button>
					        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
							
							<div class="album-preview flex" v-if="formData.albums">
								<div class="album-item flex" v-for="(item,index) in formData.albums">
									<img :src="item" />
									<span class="del-btn">
										<el-button size="mini" @click="deleteAlbumsImage(index)" type="danger" icon="el-icon-delete"></el-button>
									</span>
								</div>
							</div>
					    </el-upload>
					</el-form-item>
					<el-form-item label="购买方式" prop="pay_type">
					    <el-select v-model="formData.pay_type" placeholder="请选择">
					        <el-option
					                v-for="item in pay_types"
					                :key="item.key"
					                :label="item.val"
					                :value="item.key">
					        </el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="售价(钱)" prop="goods_price" v-show="formData.pay_type==2||formData.pay_type==3">
					    <el-input type="number" v-model="formData.goods_price" placeholder="售价(人民币)" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="售价(金币)" prop="goods_golds" v-show="formData.pay_type==1||formData.pay_type==2">
					    <el-input type="number" v-model="formData.goods_golds" placeholder="售价(金币)" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="库存数量" prop="goods_store">
					    <el-input type="number" v-model="formData.goods_store" placeholder="库存数量" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="最大订购数" prop="max_nums">
					    <el-input type="number" v-model="formData.max_nums" placeholder="最大订购数" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品详情" prop="detail">
					    <textarea id="detail" style="width:100%;height: 400px">{{formData.details}}</textarea>
					</el-form-item>
					<el-form-item>
					    <el-button type="primary" @click="onSubmit('formData')">确 定</el-button>
					</el-form-item>
				</el-form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    var data    = <?=isset($data) ? $data : "{}"?>;

    var my = new Vue({
        el: "#myApp",
        data: {
            formData: {
				id: data.id || 0,
				goods_name: data.goods_name || '',
				goods_type: data.goods_type || '',
				cover: data.cover || '',
				main_video: data.main_video || '',
				albums: data.albums || [],
				pay_type: data.pay_type || '',
				goods_price: data.goods_price || 0,
				goods_golds: data.goods_golds || 0,
				max_nums: data.max_nums || 1,
				goods_store: data.goods_store || 0,
				details: data.details || '',
				status: data.status || 1,
				rels: data.rels || {}
            },
            relsData: [],
			goodsTypes: [],
			pay_types: [],
            rules: {
            	goods_name: [
            		{ required: true, message: '此项不能为空', trigger: 'blur' },
            	],
            	goods_type: [
            		{ required: true, message: '此项不能为空', trigger: 'blur' },
            	],
            	pay_type: [
            		{ required: true, message: '此项不能为空', trigger: 'blur' },
            	],
            	details: [
            		{ required: true, message: '此项不能为空', trigger: 'blur' },
            	]
            },
            ue:null
        },
        methods: {
            onSubmit (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
						let _loading = this.$loading({
						    lock: true,
						    text: '保存中...',
						    spinner: 'el-icon-loading',
						    background: 'rgba(0, 0, 0, 0.7)'
						})
						
            			this.formData.details = this.ue.getContent()
                        axios.post( Url({a:'save'}) , this.formData)
                            .then(res => {
                                this.$message({
                                    message:'操作成功',
                                    type:'success',
                                    duration:1500
                                });
                                _loading.close()
								
								setTimeout(function(){
									window.location.href = Url({a:'index'})
								},2000)
								
                            }).catch(_ => {
								this.$message({
									message: '操作失败',
									type: 'error'
								})
								_loading.close()
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
            ,doLoadGoodsTypes () {
                axios.get(Url({a:'get_attr' , q:{name:'goods_type'}}))
            	.then(res => {
            		this.goodsTypes = res.data.data
            	})
            }
            ,doLoadPayTypes () {
                axios.get(Url({a:'get_attr' , q:{name:'pay_type'}}))
            	.then(res => {
            		this.pay_types = res.data.data
            	})
            }
            ,uploadVideoSuccess(response, file, fileList)
            {
                if (response.code != 200) {
                    return this.$message.error(response.msg);
                } else {
                    this.formData.main_video = response.url
                    return this.$message.success(response.msg);
                }
            }
            ,uploadAlbumSuccess(response, file, fileList)
            {
                if (response.code != 200) {
                    return this.$message.error(response.msg);
                } else {
                    this.formData.albums.push(response.url)
                    return this.$message.success(response.msg);
                }
            }
            ,deleteAlbumsImage(key) {
            	return this.formData.albums.splice(key,1)
            }
            ,uploadCoverSuccess(response, file, fileList) {
                if (response.code != 200) {
                    return this.$message.error(response.msg);
                } else {
                    this.formData.cover = response.url
                    return this.$message.success(response.msg);
                }
            }
            ,loadCoupons() {
        		axios.get(Url({c:'finance.coupon', a:'get_all'}))
            	.then(res => {
            		this.relsData = res.data.data
            	})
            }
        },
        mounted(){
            this.ue = UE.getEditor('detail')
            this.doLoadGoodsTypes()
            this.doLoadPayTypes()

            if ( this.formData.goods_type == 6 ) {
    			this.loadCoupons()
    		}

        },
        watch: {
        	'formData.goods_type': function(_n,_o) {
        		if ( _n == 6 ) {
        			this.loadCoupons()
        		}
        	}
        }
    })
</script>
{/block}